<template>
  <div class="header">
    <div class="left"><span class="iconfont">&#xe623;</span></div>
    <div class="input">
      <span class="iconfont">&#xe692;</span>输入城市或者景点
    </div>
    <router-link to="/City">
    <div class="right">
      <span class="iconfont">&#xe611;</span>{{this.$store.state.city}}
    </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'homeheader',
  props: {
  }
}
</script>

<style lang="scss" scoped>
   .header{
     height: .86rem;
     display: flex;
     background: #00bcd4;
     line-height: .86rem;
     .left{
       width: .64rem;
       margin-left: .2rem;
       .iconfont{
         font-size: .5rem;
         color: white;
       }
     }
     .right{
       width: 1.24rem;
       float: right;
       text-align: center;
       color: white;
       .iconfont{
         font-size: .3rem;
       }
     }
     .input{
        flex: 1;
        width: 5.4rem;
        height: .6rem;
        line-height: .6rem;
        border-radius: 6px;
        background: white;
        margin-top: 7px;
        color: darkgrey;
     }
   }
</style>
